<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>银行理财-详情</title>
	<link rel="stylesheet" type="text/css" href="../../build/css/base.css"/>
	<link rel="stylesheet" type="text/css" href="../../build/css/style.css">
	<script src="../../build/public/vue.js" charset="utf-8"></script>
	<script src="../../build/public/base.js" charset="utf-8"></script>
</head>
<body>
	<div id="container" style="padding-bottom:50px;">
		<div class="detail-2-top">
			<p class="pro-name">{{productInfo.name}}</p>
			<div class="pro-value">
				<span>{{productInfo.apr | formatNum('+','%')}}</span>
				<i>预计年化收益率</i>
			</div>
			<ul class="clear-fix pro-intro">
				<li>
					<!--<span v-if="!productInfo.extraTerm">&#45;&#45;</span>-->
					<!--<span v-else-if="productInfo.extraTerm > 0 ">{{productInfo.investmentTerm}} + {{productInfo.extraTerm}} {{productInfo.investmentTermUnit | formatUnit}}</span>-->
					<span>{{productInfo.investmentTerm}} {{productInfo.investmentTermUnit | formatUnit}}</span>
					<i>投资期限</i>
				</li>
				<li @click="showTips = !showTips">
					<!--<span>R1-谨慎型</span>-->
					<span v-if="!productInfo.zhidianGrade">--</span>
					<span v-else>{{ productInfo.zhidianGrade | formatLevel }}</span>
					<div class="pro-intro-span">资招评级<span>?</span>
						<transition name="slide-fade">
						<div class="pro-intro-tips" v-if="showTips">
							资招评级是根据客户风险评测、发行机构评级等因素综合判定
						</div>
						</transition>
					</div>
				</li>
				<li>
					<span>{{(productInfo.minimumInvestment/10000).toFixed(0)}}万元</span>
					<i>起购金额</i>
				</li>
			</ul>
			<div class="timer-bar">
				<p><span>{{ productInfo.purchaseDate | formatTime}}</span><span style="float:right">{{ productInfo.purchaseDeadline | formatTime}}</span></p>
				<div class="timer-bar-bac"><i :style="{width:width+'%'}"></i></div>
			</div>
		</div>
		<div class="detail-2-list">
			<dl class="active">
				<dt>产品概念</dt>
				<dd class="emptyHandle" style="margin: 0 15px">
					<p>产品机构：<span>{{issuer.issuerName}}</span></p>
					<p>产品名称：<span>{{productInfo.name}}</span></p>
					<!--<p>产品代码：<span>{{productInfo.code}}</span></p>-->
					<p>币&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;种：<span>{{ proDetail.currency  | currency }}</span></p>
					<p>结构类型：<span>{{ proDetail.structType }}</span></p>
					<p>挂钩标的：<span>{{ proDetail.hookMark  }}</span></p>
					<p>收益类型：<span>{{ proDetail.financialType |  profitKind }}</span></p>
					<p>保本比例：<span v-if="!proDetail.guaranteedRate">--</span><span v-else>{{ proDetail.guaranteedRate  }}%</span></p>
					<!--<p>投资品种：<span>{{ proDetail.investmentVariety  }}</span></p>-->
					<p>收益起止日期：<span>{{ proDetail.effectiveDate  | formatTime }} 至 {{ proDetail.expiredDate  | formatTime }}</span></p>
				</dd>
			</dl>
			<dl>
				<dt @click="collapse">申购条款<span class="iconfont">&#xe68f;</span></dt>
				<dd class="emptyHandle" style="margin: 0 15px">
					<p>发行对象：<span>{{ proDetail.issuingTarget   }}</span></p>
					<p>发行地区：<span>{{ proDetail.issuingRegion   }}</span></p>
					<p>销售起止日期：<span>{{ productInfo.purchaseDate  | formatTime}} 至 {{ productInfo.purchaseDeadline | formatTime}}</span></p>
					<p>委托起始金额：<span>{{ proDetail.initialAmount   }}</span></p>
					<p>计划募集金额：<span>{{ proDetail.raiseAmount   }}</span></p>
					<p>购买渠道：<span>{{ proDetail.purchaseChannel   }}</span></p>
					<p>管理费率：<span>{{ proDetail.managementFee  | formatPercent  }}</span></p>
					<p>托管费率：<span>{{ proDetail.hostingFee   | formatPercent }}</span></p>
					<p>认购费率：<span>{{ proDetail.subscriptionRate  | formatPercent}}</span></p>
					<p>赎回费率：<span>{{ proDetail.redemptionRate  | formatPercent  }}</span></p>
					<p>银行有权提前终止：<span>{{ proDetail.bankTerminate  | formatBooleanType }}</span></p>
					<p>投资者可提前赎回：<span>{{ proDetail.investorRedeemed  | formatBooleanType }}</span></p>
					<p>超额收益为管理费：<span>{{ proDetail.excessManagement  | formatBooleanType  }}</span></p>
				</dd>
			</dl>
			<dl>
				<dt @click="collapse">详细资料<span class="iconfont">&#xe68f;</span></dt>
				<dd style="margin: 0 15px">
					<p v-for="item in detailData">
						<a :href="item.url">{{ item.name }}</a>
					</p>
				</dd>
			</dl>
		</div>
		<div class="btn-buttom" style="display: none;">
			<button type="button" class="contact" @click="window.location.href='../mine/planner.html'">预约购买</button>
			<button type="button" class="purchase"  @click="showDialog = !showDialog">分享</button>
		</div>
	</div>
<script src="../../build/public/vue-resource.js" charset="utf-8"></script>
<script src="../../build/js/config.js" charset="utf-8"></script>
<script src="../../build/js/common.js" charset="utf-8"></script>
<script type="text/javascript">
	var vm = new Vue({
		el:'#container',
		data:{
			showTips:false,
			proDetail:'',
			productInfo:'',
			issuer:'',
			idStr:'',
			detailData:'',
			width:'',
		},
		mounted:function(){
			this.$nextTick(function(){
				vm.idStr = this.getParameter('idStr');             //获取链接中idStr的参数
				vm.getDetailData();
			})
		},
		updated:function () {
			this.$nextTick(function(){
				vm.emptyHandle();
			});
		},
		methods:{
			getDetailData:function(callback){										//获取数据
				var url = "/product/bank-financial-product/detail"//银行理财详情
				get(url,{idStr:vm.idStr},function(res){
					vm.proDetail = res.data;                        //数据赋值
					vm.productInfo = res.data.product;
					vm.issuer = res.data.product.issuerDetail;
					//  详细资料的api
					vm.detailData = res.data.bankFinancialInstruction;
					var len = vm.detailData.length;
					for(var i=0; i<len; i++){
						vm.detailData[i].url = domain + vm.detailData[i].url;
					}

					var date = new Date();
					var now = date.getTime();
					var num1 = res.data.product.purchaseDeadline-res.data.product.purchaseDate;
					var num2 = now-res.data.product.purchaseDate;
					if(now > res.data.product.purchaseDeadline){
						document.getElementsByClassName('timer-bar-bac')[0].getElementsByTagName('i')[0].style.display = 'none';
						document.getElementsByClassName('timer-bar-bac')[0].style.backgroundColor = '#8c93a2';
					}
					else{
						vm.width = (num2/num1)*100;
					}
					console.log("截止日期："+ res.data.product.purchaseDeadline);
					console.log("开始日期："+res.data.product.purchaseDate);
					console.log("当前日期："+now);
					console.log("占比："+vm.width);
				})
			},
			collapse:function($this){       										//折叠菜单
				var thisMenu = $this.target.nextSibling.nextSibling;
				var isHide = thisMenu.parentNode.classList.contains('active');
				if(isHide){
					thisMenu.parentNode.classList.remove('active');
					thisMenu.style.height = 0;
				}else {
					thisMenu.parentNode.classList.add('active');
					thisMenu.style.height = thisMenu.scrollHeight + 'px';
				}
			},
			getParameter:function(name){                        //获取链接参数
				var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     			var r = window.location.search.substr(1).match(reg);
     			if(r!=null)return  unescape(r[2]); return null;
			},
			emptyHandle:function () {
				var contentLists = document.getElementsByClassName('emptyHandle');
				var contentList1 = contentLists[0].getElementsByTagName('span');
				var contentList2 = contentLists[1].getElementsByTagName('span');
				for(var i=0; i<contentList1.length;i++){
					console.log(contentList1[i].innerHTML);
					if(contentList1[i].innerHTML == ''){
						contentList1[i].innerHTML = '-- ';
					}   // if end
				}   // for end
				for(var i=0; i<contentList2.length;i++){
					if(contentList2[i].innerHTML == ''){
						contentList2[i].innerHTML = '-- ';
					}   // if end
				}   // for end
			}
		}
	});
</script>
</body>
</html>
